<template>
	<view style="padding: 0rpx 5rpx 0rpx 5rpx;">
		<swiper :indicator-dots="false" class="swiper1" style="background-color:white" :current="current"
			@change='changeSwiper'>
			<swiper-item v-for="(item,index) in list" :key="index">
				<up-form labelPosition="left" :labelStyle="labelStyle" :borderBottom="true" :ref="'orderForm'+index"
					:model="item" :rules="huiKuanRules">
					<up-form-item label="SKU名称" label-width="140" prop="skuName" :borderBottom="true">
						<up-input type="text" class="form-field-select" v-model="item.skuName" readonly />
					</up-form-item>
					<up-form-item label="外包装" label-width="140" prop="packageMethod" :borderBottom="true">
						<up-input type="text" class="form-field-select" v-model="item.packageMethod" readonly />
					</up-form-item>
					<up-form-item label="内包装" label-width="140" prop="innerPackageMethod" :borderBottom="true">
						<up-input type="text" class="form-field-select" v-model="item.innerPackageMethod" readonly />
					</up-form-item>
					<up-form-item label="产品名称" label-width="140" prop="productName" :borderBottom="true">
						<up-input type="text" class="form-field-select" v-model="item.productName" readonly />
					</up-form-item>
					<up-form-item label="等级" label-width="140" prop="grade" :borderBottom="true">
						<up-input type="text" class="form-field-select" v-model="item.grade" readonly />
					</up-form-item>
					<up-form-item label="最小规格/kg" label-width="140" prop="minimum" :borderBottom="true">
						<up-input type="text" class="form-field-select" v-model="item.minimum" readonly />
					</up-form-item>
					<up-form-item label="箱规(数量)" label-width="140" prop="weight" :borderBottom="true">
						<up-input type="text" class="form-field-select" v-model="item.weight" readonly />
					</up-form-item>
					<up-form-item label="订货数量(箱/件)" label-width="140" prop="piece" :borderBottom="true">
						<up-input type="text" class="form-field-select" v-model="item.piece" readonly />
					</up-form-item>
					<up-form-item label="销售单价(最小规格/元)" label-width="140" prop="price" :borderBottom="true">
						<up-input type="text" class="form-field-select" v-model="item.price" readonly />
					</up-form-item>
					<up-form-item label="销售合计/元" label-width="140" prop="priceTotal" :borderBottom="true">
						<up-input type="text" class="form-field-select" v-model="item.priceTotal" readonly />
					</up-form-item>

					<up-form-item label="订单重量" label-width="140" prop="desc" :borderBottom="true">
						<up-input type="text" class="form-field-select" v-model="item.desc" readonly />
					</up-form-item>
					<up-form-item label="销售单价/公斤/元" label-width="140" prop="productName" :borderBottom="true">
						<up-input type="text" class="form-field-select" v-model="item.productName" readonly />
					</up-form-item>
					<up-form-item label="出库类型" label-width="140" prop="type" :borderBottom="true">
						<up-input type="text" class="form-field-select" v-model="item.type" readonly />
					</up-form-item>
					<up-form-item label="新旧货" label-width="140" prop="extent" :borderBottom="true">
						<up-input type="text" class="form-field-select" v-model="item.extent" readonly />
					</up-form-item>
					<up-form-item label="打托方式(箱/托)" label-width="140" prop="palletizingMethod" :borderBottom="true">
						<up-input type="text" class="form-field-select" v-model="item.palletizingMethod" readonly />
					</up-form-item>
					<up-form-item label="备注" label-width="140" prop="notes" :borderBottom="true">
						<up-input type="text" class="form-field-select" v-model="item.notes" readonly />
					</up-form-item>
					<up-form-item label="实际发货数量(箱/件)" label-width="140" prop="piece1" :borderBottom="true">
						<up-input type="text" class="form-field-select" v-model="item.piece" readonly />
					</up-form-item>
					<up-form-item label="实际发货重量(kg)" label-width="140" prop="grossWeight" :borderBottom="true">
						<up-input type="text" class="form-field-select" v-model="item.grossWeight" readonly />
					</up-form-item>
					<up-form-item label="应收金额" label-width="140" prop="yingshou" :borderBottom="true">
						<up-input type="text" class="form-field-select" v-model="item.yingshou" readonly />
					</up-form-item>

					<up-form-item label="签收数量(箱/件)" label-width="140" prop="signNum" :borderBottom="true" required>
						<up-input type="text" class="form-field-select" v-model="item.signNum" placeholder="请填写签收数量" />
					</up-form-item>
					<up-form-item label="签收重量(kg)" label-width="140" prop="signWeight" :borderBottom="true" required>
						<up-input type="text" class="form-field-select" v-model="item.signWeight"
							placeholder="请填写签收重量" />
					</up-form-item>
					<!-- #ifdef APP-->
					<up-form-item :borderBottom="true" label-width="140" label="回款日期" required @tap="dateClick(item)"
						prop="returnDate">
						<up-input v-model="item.returnDate" placeholder="请选择时间" readonly></up-input>
					</up-form-item>
					<!-- #endif -->
					<!-- #ifdef H5-->
					<up-form-item :borderBottom="true" label-width="140" label="回款日期" required prop="returnDate">
						<up-input v-model="item.returnDate" placeholder="请选择时间"
							@click.native="dateClick(item)"></up-input>
					</up-form-item>
					<!-- #endif -->
					<!-- 					<up-form-item label="回款日期" label-width="140" prop="returnDate" :borderBottom="true" required>
						<up-input type="text" class="form-field-select" v-model="item.returnDate" placeholder="请填写回款日期" />
					</up-form-item> -->
					<up-form-item label="回款金额" label-width="140" prop="returnAmount" :borderBottom="true" required>
						<up-input type="number" class="form-field-select" v-model="item.returnAmount"
							placeholder="请填写回款金额" />
					</up-form-item>
					<up-form-item label="回款备注" label-width="140" prop="returnRemark" :borderBottom="true" required>
						<up-input type="text" class="form-field-select" v-model="item.returnRemark"
							placeholder="请填写回款备注" />
					</up-form-item>
					<up-loadmore loadmoreText="可左右滑动" color="red" lineColor="red" line />
				</up-form>
			</swiper-item>
		</swiper>
		<up-form labelPosition="left" :labelStyle="labelStyle" :borderBottom="true" :model="form" ref="formRef">
			<up-form-item label="回款凭证" label-width="120" :borderBottom="true" required>
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10"></u-upload>
			</up-form-item>
			<up-form-item label="是否全部回款" label-width="140" prop="returnIf" :borderBottom="true" required>
				<up-radio-group v-model="form.returnIf" shape="square">
					<up-radio :key="0" :name="1" label="是" :customStyle="{marginRight: '16px'}" activeColor="green" />
					<up-radio :key="1" :name="0" label="否" :customStyle="{marginRight: '16px'}" activeColor="green" />
				</up-radio-group>
			</up-form-item>
		</up-form>
		<view style="margin-top: 50rpx;padding: 0rpx 30% 0rpx 30%;">
			<up-button type="primary" color="green" shape="circle" text="订单回款" @click="huiKuanSave" :loading="loading"></up-button>
		</view>
	</view>
	<u-calendar :show="dateShow" mode="single" @confirm="timeConfirm" @close="dateShow=false"
		:minDate="minDate" :maxDate="maxDate" :monthNum="12"></u-calendar>
		
	<!-- 消息提示	 -->
	<u-toast ref="uToast" />	
	<!-- 	<u-datetime-picker :show="dateShow" v-model="signTime" mode="datetime" closeOnClickOverlay @confirm="timeConfirm"
		@cancel="dateShow =false" @close="dateShow =false"></u-datetime-picker> -->
</template>

<script>
	import orderApi from '@/apis/gyl/order.js';
	export default {
		props: {
			belongList: {
				type: Array,
				default: {}
			}
		},
		data() {
			return {
				loading: false,
				labelStyle: {
					color: '#aaa',
					fontSize: '30rpx'
				},
				belongObject: null,
				list: [],
				dateShow: false,
				current: 0,
				minDate: '2024-12-01',
				maxDate: '2035-01-01',
				form: {
					returnIf: 0,
					driverName: null,
					signPerson: null,
					signTime: null,
					signImg: null,
					psImg: null,
				},
				fileList1: [],
				signTime: Number(new Date()),
				huiKuanRules: {
					returnAmount: [{
						required: true,
						trigger: ['blur', 'change'],
						message: "请填写回款金额"
					}],
					returnDate: [{
						required: true,
						trigger: ['blur', 'change'],
						message: "请填写回款日期"
					}],
				},
			}
		},
		methods: {
			/**
			 * app 调用
			 */
			dateClick(item) {
				this.belongObject = item;
				this.dateShow = true;
			},
			/**
			 * 新增图片
			 */
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					const object = JSON.parse(result);
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: object.url
					}))
					fileListLen++
				}
			},

			/**删除图片
			 * @param {Object} event
			 */
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},

			/**上传图片到服务器
			 * @param {Object} url
			 */
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://121.229.107.81:81/api/file/uploadMoblieQs', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						}
					});
				})
			},

			/**
			 * 回款时间
			 */
			timeConfirm(e) {
				this.belongObject.returnDate = e[0];
				this.dateShow = false;
			},

			nowDate(time) {
				var year = time.getFullYear(); // 年
				var month = (time.getMonth() + 1).toString().padStart(2, "0"); // 月
				var date = time.getDate().toString().padStart(2, "0"); // 日
				var hour = time.getHours().toString().padStart(2, "0"); // 时
				var minute = time.getMinutes().toString().padStart(2, "0"); // 分
				var second = time.getSeconds().toString().padStart(2, "0"); // 秒
				return (
					year +
					"-" +
					month +
					"-" +
					date +
					" " +
					hour +
					":" +
					minute +
					":" +
					second
				);
			},
			async getFaHuo() {
				for (var i = 0; i < this.list.length; i++) {
					var data = this.list[i];
					const res = await orderApi.getSellFaHuo(data.id);
					if (res.success) {
						this.$set(data, "piece", res.data.piece);
						this.$set(data, "grossWeight", res.data.grossWeight);
						this.$set(data, "fhDate", res.data.fhDate);
						if ((data.unit == '散货')) {
							this.$set(data, 'yingshou', (data.price * data.grossWeight).toFixed(2));
						} else {
							this.$set(data, 'yingshou', (data.piece * data.price).toFixed(2));
						}
					}
				};

			},
			changeSwiper(e) {
				this.current = e.detail.current;
			},
			async huiKuanSave() {
				var flag = true;
				var index = 0;
				for (var i = 0; i < this.list.length; i++) {
					const ref = eval("this.$refs.orderForm" + i)[0];
					await ref.validate().then(res => {}).catch(errors => {
						flag = false;
						index = i;
						uni.$u.toast(errors[0].message)
					})
					if (!flag) {
						break;
					}
				}
				if (!flag) {
					this.current = index;
					return;
				}
				this.loading = true;
				var arr = [];
				this.fileList1.forEach((item) => {
					arr.push(item.url);
				})
				var paymentList = [];
				var signList = [];
				this.list.forEach(item => {
					if (item.returnDate != '' && item.returnDate != undefined) {
						var data = {
							belongId: item.id,
							returnDate: item.returnDate,
							returnAmount: item.returnAmount,
							returnRemark: item.returnRemark,
						}
						paymentList.push(data);
						signList.push({
							belongId: item.id,
							signNum: item.signNum,
							signWeight: item.signWeight
						})
					}
				});
				var data = {
					paymentList: paymentList,
					sellId: this.list[0].mainId,
					fileList: arr.join(","),
					isReturn: this.form.returnIf,
					orderNum: this.form.sumNumber,
					signList: signList
				};
				const res = await orderApi.belongReturn(data);
				if (res.success) {
					this.$refs.uToast.show({
						type: 'success',
						message: '订单回款成功',
						duration: 1500, // 设置适当的持续时间
						complete: () => {
                           uni.navigateBack()
						},
					});	
				} else {
					this.loading = false;
					uni.showToast({
						icon: 'none',
						duration: 3000,
						title: '订单回款失败'
					});
				}
			}
		},

		mounted() {
			this.list = this.belongList;
			this.list.forEach(item => {
				item.dateShow = false;
			})
			this.form.sumNumber = this.list[0].orderSum;
			this.getFaHuo();
		}
	}
</script>

<style scoped>
	.swiper1 {
		height: 1900rpx;
	}

	.u-form {
		border: 2px solid #dfdfdf;
		/* 	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); */
		border-radius: 15px;
	}
</style>